<template>
  <div>
    <img class="user-poster" src="/img/mine_background.jpg">
    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="pending-payment" :info="toPayNum" @click="toOrderList(1)"/>
        待付款
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" @click="toOrderList(2)"/>
        待发货
      </van-col>
      <van-col span="6">
        <van-icon name="logistics" :info="toReceiveNum" @click="toOrderList(3)"/>
        待收货
      </van-col>
      <van-col span="6">
        <van-icon name="bag-o" @click="toOrderList(4)"/>
        已收货
      </van-col>
    </van-row>
    <!--<div class="user-group"></div>-->
    <van-cell-group >
      <van-cell icon="records" title="全部订单" is-link to="orderList"/>
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="label-o" title="我的收货地址" is-link to="addressList"/>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data () {
    return {
      toPayNum: '', // 待付款的订单数量
      toReceiveNum: '' // 待收货的订单数量
    }
  },
  methods: {
    /**
     * 查询当前用户待付款订单
     * @param openId
     * @param orderStatus 0：已取消 1：待付款 2：待发货 3：待收货 4：已收货
     */
    getOrderListByOpenIdAndOrderStatus (openId, orderStatus) {
      const self = this
      const param = { openId: openId, orderStatus: orderStatus }
      self.axios.get('api/shop/getOrderListByOpenIdAndOrderStatus', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          if (resp.data.data.length > 0) {
            if (orderStatus === '1') {
              self.toPayNum = resp.data.data.length
            } else if (orderStatus === '3') {
              self.toReceiveNum = resp.data.data.length
            }
          }
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 跳转订单列表页面
     * @param active 0:全部 1：待付款 2：待发货 3：待收货 4：已收货
     */
    toOrderList (active) {
      this.$router.push({ name: 'orderList', params: { active: active } })
    }
  },
  mounted () {
    const self = this
    let openId = self.$store.state.openId
    // 查询当前用户待付款订单
    self.getOrderListByOpenIdAndOrderStatus(openId, '1')
    // 查询当前用户待收货订单
    self.getOrderListByOpenIdAndOrderStatus(openId, '3')
  }
}
</script>

<style lang="less" scoped>
.van-info {
  right: 30px;
}

.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
